@extends( 'layouts.main' )

@section( 'left-content' )
<!-- BEGIN PROFILE HEADING -->
<div class="the-box transparent full no-margin profile-heading">
	
	<div class="right-action">
		@if( $self ) <button class="btn btn-warning btn-square btn-xs">Change cover</button> @endif
	</div>
	
	{{ HTML::image( $user->profile_heading_url, 'Image', array( 'class' => 'bg-cover' ) ) }}
	{{ HTML::image( $user->avatar_url, $user->user_name, array( 'class' => 'avatar' ) ) }}
	
	<div class="profile-info">
		<p class="user-name">{{{$user->user_name}}}</p>
                <p class="text-muted">{{{$user->biography}}}</p>
		<p class="text-muted"> {{{$user->city}}} @if (!empty($user->city) && !empty($user->country))), @endif {{{ $user->country }}}</p>
		
		<p class="right-button">
			@if( $self ) <button class="btn btn-primary btn-sm">Edit profile</button> @endif
		</p>
	</div>
	
</div>
<!-- END PROFILE HEADING -->

<div class="panel with-nav-tabs panel-primary panel-square panel-no-border">

	<!-- TABS DE USUARIO -->
  	<div class="panel-heading">
		<ul class="nav nav-tabs">
			<li class="active">
				<a href="#panel-last-activities" data-toggle="tab"><i class="fa fa-home"></i></a>
			</li>
			<li>
				<a href="#panel-recipes" data-toggle="tab"><i class="fa fa-book"></i></a>
			</li>
			
			<li>
				<a href="#panel-recipes-pending" data-toggle="tab"><i class="fa fa-thumb-tack"></i></a>
			</li>
			<li>
				<a href="#panel-recipes-favourites" data-toggle="tab"><i class="fa fa-star"></i></a>
			</li>
			<li>
				<a href="#panel-you-follow" data-toggle="tab"><i class="fa fa-child"></i></a>
			</li>
			<li>
				<a href="#panel-followers" data-toggle="tab"><i class="fa fa-users"></i></a>
			</li>
			@if( $self )
			<li>
				<a href="#panel-notifications" data-toggle="tab"><i class="fa fa-envelope"></i></a>
			</li>
			@endif
			<li>
				<a href="#panel-personal-info" data-toggle="tab"><i class="fa fa-user"></i></a>
			</li>
		</ul>
  	</div>
  	<!-- /TABS DE USUARIO -->
  	
  	<!-- CONTENIDO TABS DE USUARIO -->
	<div id="panel-collapse-1" class="collapse in">
		<div class="panel-body">
			<div class="tab-content">
				@include( 'profile.panel-last-activities' )
				@include( 'profile.panel-recipes',array( 'recipes' => $user->recipes ) )
				@include( 'profile.panel-recipes-pending',array( 'recipesPending' => $user->recipesPending ) )
				@include( 'profile.panel-recipes-favourites', array( 'recipesFavourites' => $user->recipesFavourites ))
				@include( 'profile.panel-you-follow' )
				@include( 'profile.panel-followers' )
				@include( 'profile.panel-notifications' )
				@include( 'profile.panel-personal-info' )
			</div><!-- /.tab-content -->
		</div><!-- /.panel-body -->
	</div><!-- /.collapse in -->
	<!-- /CONTENIDO TABS DE USUARIO -->
	
</div><!-- /.panel .panel-success -->
@endsection